<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: wuhao
 * @Date: 2021-09-16 10:06:35
 * @LastEditors: wuhao
 * @LastEditTime: 2021-10-08 09:19:57
-->
<template>
  <div>
    <select v-model="selectCity"
      @change="cityChange"
      class="select">
      <option :label='item.name'
        :value="item.value"
        v-for="item in options"
        :key="item.value"></option>
    </select>
    <div class="selectedText">{{selectedText}}</div>
    <div class="mapMain" id="mapMain"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-gl';
import { mapState } from 'vuex'

export default {
  name: 'Main',
  data() {
    return {
      selectCity: '361000',
      mapConfigJson: require("../../assets/config/map.json"),
      map: '',
      mapLoadCity: '',
      cityName: [],
      mapdataJson: [],
      selectedText: ''
    }
  },
  mounted() {
    this.cityChange();
  },
  computed: {
    ...mapState('main',['JZtestData', 'FZtestData', 'options'])
  },
  methods: {
    // 下拉框城市区域切换  
    cityChange() {
      this.selectedText = ''
      this.cityName = []
      this.options.map(item => {
        if (item.value === this.selectCity) {
          this.mapLoadCity = item.name
          this.cityName.push(item.name)
        }
      })
      this.mapChart();
    },
    //显示地图
    mapChart() {
      this.map = echarts.init(document.getElementById('mapMain'));
      this.initMenu();
      this.map.on("click", this.mapClick);
    },
    //地图点击事件
    mapClick({name}) {
       this.selectedText = `当前选中区域为: ${this.mapLoadCity}--${name}`;
    },
    initMenu() {
      this.loadMap(this.mapLoadCity, this.loadData(this.mapLoadCity));
    },
    loadData(mapLoadCity) {
        return mapLoadCity === '荆州市' ? this.JZtestData : this.FZtestData;
    },
    /**
      * 加载地图
      * @param name
    */
    loadMap(name, mapdataJson) {
      let markPointData = this.mapConfigJson[name]["qxwz"];
      if (!this.mapConfigJson[name].geoJson) {
        return;
      }
      let geoJson = require("../../assets/mapdata" + this.mapConfigJson[name].geoJson);
      echarts.registerMap(name, geoJson);
      let dataColor = () => {
        let colorlist = [];
        for (let i = 0; i < mapdataJson.length; i++) {
          if (mapdataJson[i].value < 1000) {
            colorlist.push("rgb(207,234,254)");
          } else if (mapdataJson[i].value >= 1000 && mapdataJson[i].value < 2000) {
            colorlist.push("rgb(138,184,252)");
          } else if (mapdataJson[i].value >= 2000 && mapdataJson[i].value < 3000) {
            colorlist.push("rgb(101,162,249)");
          } else if (mapdataJson[i].value >= 3000) {
            colorlist.push("rgb(79,132,235)");
          }
        }
        return colorlist;
      }
      let option = {
        // backgroundColor: '#000f1e',
        geo: [
          {
            geoIndex: 0,
            z: 1,
            type: 'map',
            map: name,
            center: [116.38, 27.56],
            // roam: true,
            zoom: 1,
            aspectScale: 1.3, //长宽比
            scaleLimit: {
              "min": 1.1,
              "max": 15
            },
            label: { //标签样式设置
              show: true,
              fontSize: 14,
              color: 'rgba(255,255,255)',
            },
            itemStyle: {
              normal: {
                borderColor: "#fff",
                borderWidth: 1,
                areaColor: 'rgb(207,234,254)',
                fontWeightL: 700,
              },
              emphasis: {
                areaColor: 'rgb(243,215,115)',
                borderWidth: 0
              }
            },
            select: {
              itemStyle: {
                areaColor: 'rgb(243,215,115)',
                // color:  ,
                borderColor: '#fff',
                borderWidth: 3,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                opacity: 1,
              }
            },
            selectedMode: 'multiple',
          },
          {
            geoIndex: 0,
            map: name,
            z: 0,
            zoom: 1,
            // roam: true,
            center: [116.348, 27.58],
            aspectScale: 1.3, //长宽比
            scaleLimit: {
              "min": 1.1,
              "max": 15
            },
            label: { //标签样式设置
              show: true,
              fontSize: 14,
              color: 'rgba(150,181,246,0)',
            },
            itemStyle: {
              normal: {
                shadowColor: '#ececec',
                shadowOffsetX: 5,
                shadowOffsetY: 5,
                // borderColor: 'rgb(58,82,154)',
                borderColor: "#fff",
                borderWidth: 1,
                areaColor: 'rgb(187,217,253)',
              },
              emphasis: {
                areaColor: 'rgb(187,217,253)',
                borderWidth: 0
              },
            }
          },
        ],
        visualMap: [{
          min: 0,
          max: 10,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'],
          calculable: true,
          show: false,
          inRange: {
            color: dataColor()
          }
        }],
        color: ['white'],
        series: [
          {
            name: "热力图",
            type: "heatmap",
            coordinateSystem: "geo",
            geoIndex: 0,
            markPoint: { //标记点
              // symbol: 'image://' + require("../../assets/img/mapIndex/dhk.png"),
              // symbol: "<div style='width: 0.5rem; height: 0.03rem; background-color: #fff; border-radius: 50% 0;'></div>",
              symbol: 'roundRect',
              // symbol: 'path://m 0,0 h 48 v 20 h -30 l -6,10 l -6,-10 h -6 z',
              symbolKeepAspect: true,
              symbolSize: [35, 15], //图形大小
              label: {
                width: 100,
                height: 50,
                normal: {
                  color: '#000',
                  formatter: function (params) {
                    for (let i = 0; i < mapdataJson.length; i++) {
                      if (mapdataJson[i].name == params.name) {
                        return mapdataJson[i].value;
                      }
                    }
                  },
                  show: true,
                },
                emphasis: {
                  show: true,
                }
              },
              itemStyle: {
                color: '#fff',
              },
              data: markPointData
            }
          },
          {
            name: '地市',
            type: 'map',
            geoIndex: 0,
            data: this.getMapColor(geoJson)
          }
        ]
      };
      if (this.mapLoadCity === '荆州市') {
        option.geo[0].center = [112.71, 29.71];
        option.geo[0].zoom = 1.2;
        option.geo[1].center = [112.73, 29.73];
        option.geo[1].zoom = 1.2;
      }
      this.map.setOption(option, true);
    },
    /**
     * 生成地图颜色
     * @param geoJson
     * @returns {Array}
     */
    getMapColor(geoJson) {
      let list = [];
      for (let i in geoJson.features) {
        let feature = geoJson.features[i];
        let name = feature.properties.name;
        let json = {};
        json.name = name;
        json.value = i % 11;
        if (this.cityName.length == 2) {
          if (this.cityName[1] == name) {
            json.selected = true;
          }
        }
        list.push(json);
      }
      return list;
    },
  }
}
</script>

<style lang="css" scoped>
.mapMain {
  width: 1000px;
  height: 750px;
}
</style>